<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>ERP管理系统1.0</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link rel="stylesheet"
	href="<%=request.getContextPath()%>/resources/css/font.css">
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/resources/css/xadmin.css">
<script type="text/javascript"
	src="<%=request.getContextPath()%>/resources/lib/layui/layui.js"
	charset="utf-8"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/resources/js/xadmin.js"></script>
</head>

<body>
	<div class="layui-fluid">
		<div class="layui-row">
			<form class="layui-form">

				<div class="layui-form-item">
					<label for="L_id" class="layui-form-label"> <span
						class="x-red">*</span>编号
					</label>
					<div class="layui-input-inline">
						<input type="text" readonly="readonly" id="L_id"
							value="${user.id}" name="id" required="" lay-verify="id"
							class="layui-input" autocomplete="off">
					</div>
					<div class="layui-form-mid layui-word-aux">
						<span class="x-red">*</span>ID是系统为您准备的专属编号
					</div>
				</div>

				<div class="layui-form-item">
					<label for="L_username" class="layui-form-label"> <span
						class="x-red">*</span>用户名
					</label>
					<div class="layui-input-inline">
						<input type="text" value="${user.username }" id="L_username"
							name="username" required="" lay-verify="username"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid layui-word-aux">
						<span class="x-red">*</span>用户名是您登陆的唯一凭证
					</div>
				</div>

				<div class="layui-form-item">
					<label for="L_password" class="layui-form-label"> <span
						class="x-red">*</span>密码
					</label>
					<div class="layui-input-inline">
						<input type="password" value="${user.password }" id="L_password"
							name="password" required="" lay-verify="password"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid layui-word-aux">
						<span class="x-red">*</span>密码为6到16个字符
					</div>
				</div>

				<div class="layui-form-item">
					<label for="L_repassword" class="layui-form-label"> <span
						class="x-red">*</span>确认密码
					</label>
					<div class="layui-input-inline">
						<input type="password" placeholder="请再次输入密码" id="L_repassword"
							name="repassword" required="" lay-verify="repassword"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid layui-word-aux">
						<span class="x-red">*</span>再次确认密码！
					</div>
				</div>

				<div class="layui-form-item">
					<label for="L_nickname" class="layui-form-label"> <span
						class="x-red">*</span>昵称
					</label>
					<div class="layui-input-inline">
						<input type="text" value="${user.nickname}" id="L_nickname"
							name="nickname" required="" lay-verify="nickname"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid layui-word-aux">
						<span class="x-red">*</span>昵称最长为16个字符
					</div>
				</div>

				<div class="layui-form-item">
					<label for="L_age" class="layui-form-label"> <span
						class="x-red">*</span>年龄
					</label>
					<div class="layui-input-inline">
						<input type="text" value="${user.age }" id="L_age" name="age"
							required="" lay-verify="age" autocomplete="off"
							class="layui-input">
					</div>
					<div class="layui-form-mid layui-word-aux">
						<span class="x-red">*</span>年龄在1~120之间
					</div>
				</div>

				<div class="layui-form-item">
					<label for="L_sex" class="layui-form-label"> <span
						class="x-red">*</span>性别
					</label>
					<div class="layui-input-block">
						<!--  性别，我们存储的值是数字 0代表女生 1代表男生 -->
						<!-- 所以这里需要进行判断操作 -->
						<c:choose>
							<c:when test="${user.sex eq 1 }">
								<input type="radio" name="sex" value="1" title="男"
									checked="checked">
								<input type="radio" name="sex" value="0" title="女">
							</c:when>
							<c:otherwise>
								<input type="radio" name="sex" value="1" title="男">
								<input type="radio" name="sex" value="0" title="女"
									checked="checked">
							</c:otherwise>
						</c:choose>

					</div>
				</div>

				<div class="layui-form-item">
					<label for="L_update" class="layui-form-label"></label>
					<button class="layui-btn" lay-filter="update" lay-submit="">更新</button>
				</div>

			</form>
		</div>
	</div>

	<script>
		layui.use([ 'form', 'layer', 'jquery' ], function() {
			$ = layui.jquery;
			var form = layui.form, layer = layui.layer;

			//自定义验证规则
			form.verify({
				username : function(value) {
					if (value.length <= 0) {
						return '用户名不能为空';
					}
				},
				nickname : function(value) {
					if (value.length <= 0) {
						return '昵称不能为空';
					}
				},
				password : [ /(.+){6,12}$/, '密码必须6到12位' ],
				repassword : function(value) {
					if ($('#L_password').val() != $('#L_repassword').val()) {
						return '两次密码不一致';
					}
				},
				age : function(value) {
					if (value.length <= 0) {
						return '年龄不能为空 ';
					}
					// 隐式转化为Number类型
					value -= 0;

					if (isNaN(value)) {
						return ' 请输出纯数字 ';
					}
					if (value<=0 || value >= 120) {
						return '年龄不合法';
					}
				}
			});

			//监听提交  校验完数据之后 向后台传递 ajax进行交互
			form.on('submit(update)', function(data) {
				// console.log(data);
				// 发异步，把数据提交
				// data 是传递的对象的信息
				$.post("update", data.field, function(obj) {
					debugger
					//json格式 变json对象
				var json = JSON.parse(obj);
					if (json.result == 1) {
						layer.alert("添加成功", {
							icon : 6,
						}, function() {
							//关闭当前frame
							xadmin.close();
							// 可以对父窗口进行刷新 
							xadmin.father_reload();
						});
					} else {
						layer.alert(json.msg, {
							icon : 5,
						})
					}
				});
			});
		});

		// 这里ajax告诉我们要去 update了  然后下一步我们的做法是
		// →去servlet 接收这个请求  注解的 路由应该是 /update  gogogog~
	</script>
	<script>
		var _hmt = _hmt || [];
		(function() {
			var hm = document.createElement("script");
			hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
			var s = document.getElementsByTagName("script")[0];
			s.parentNode.insertBefore(hm, s);
		})();
	</script>
</body>

</html>
